/*
 * @Author: wangguanqing 
 * @Date: 2018-07-11 09:37:14 
 * @Last Modified by: hy
 * @Last Modified time: 2018-07-30 16:30:51
 */

<template>
    <div class="flh_dataKb">
      <bg-lay-out :hideTopBar="true" :hideMarginLeft="true" :hideMask="true" :widthSize="true">
          <div slot="main" class="industryData">
              <div class="dataShow">
                  <top-logo-title>
                      <div slot="title">行业数据看板</div>
                  </top-logo-title>
                  <div class="chart">
                      <div class="leftView">
                          <!-- 宏观经济指数 -->
                          <div class="macroEconomy">
                              <main-title>
                                  <span slot="title">宏观经济指数</span>
                              </main-title>
                              <div class="text">
                                <p>人均收入</p>
                                <p>流动人口数量</p>
                                <p>价格指数</p>
                              </div>
                              <div class="dashBoardCon">
                                  <dashboard-chart class="dashBoardChartCon"></dashboard-chart>
                              </div>
                          </div>
                          <!-- 二手房房价走势 -->
                          <div class="secondHandHousePrice">
                              <main-title>
                                  <span slot="title">二手房房价走势</span>
                              </main-title>
                              <div style="width:466px;height:290px;">
                                <line-chart slot="main" v-model="resoldApartmentArr" :option="resoldApartmentOption" :chartStyle="'width:456px;height:182px;min-height:200px;'"></line-chart>
                              </div>
                          </div>
                          <!-- 房产开发数量与流动人口趋势对比 -->
                          <div class="houseNumHouseContrast">
                              <main-title>
                                  <span slot="title">房产开发数量与流动人口趋势对比</span>
                              </main-title>
                              <div style="width:577px;height:223px;">
                                  <line-chartss v-model="houseNumHouseContrastArr" :chartStyle="'width:577px;min-height:260px;'" :option="comparisonOption"></line-chartss>
                              </div>
                          </div>
                      </div>

                      <div class="centerView">
                          <!-- 行业资讯 -->
                          <div class="swiper_wrap news">
                              <i class="icon"></i>
                              <div class="roll">
                                  <p>行业资讯</p>
                                  <ul class="roll_list">
                                      <li>洛阳市房产行业最新政策播报1！</li>
                                      <li>洛阳市房产行业最新政策播报2！</li>
                                  </ul>
                              </div>
                          </div>
                          <!-- 主要竟对门店分布对比 -->
                          <div class="storeSpreadContrast">
                              <main-title>
                                  <span slot="title">主要竟对门店分布对比</span>
                              </main-title>
                              <radar-chart></radar-chart>
                          </div>
                      </div>

                      <div class="rightView">
                          <!-- 行业交易量 -->
                          <div class="tradeSize">
                              <main-title>
                                  <span slot="title">行业交易量</span>
                              </main-title>
                              <div style="width:423px;height:288px;">
                                  <pie-chart :chartStyle="'min-width:225px;min-height:265px'" v-model="shopOrderArr" :option="shopOrderOption"></pie-chart>
                              </div>
                          </div>
                          <!-- 市场占有率 -->
                          <div class="marketShare">
                              <main-title>
                                  <span slot="title">市场占有率</span>
                              </main-title>
                              <div style="width:424px;height:225px;">
                                  <bar-chart v-model="marketShareArr" :chartStyle="'width:424px;min-height:225px;'" :option="barChartOption"></bar-chart>
                              </div>
                          </div>
                          <!-- 人均收入与房产交易量趋势对比 -->
                          <div class="incomeHouseContrast">
                              <main-title>
                                  <span slot="title">人均收入与房产交易量趋势对比</span>
                              </main-title>
                              <line-chartss v-model="tradingInArr" :chartStyle="'width:577px;min-height:260px;'" :option="lineChartOption"></line-chartss>
                          </div>
                      </div>

                  </div>
              </div>
          </div>
      </bg-lay-out>
    </div>
</template>

<script>
var autoTimer = 0;
require("@/components/gq/l-slide.js");
import bgLayOut from "@/components/bgLayOut/index";
import topLogoTitle from "@/components/flh/dataKanban/topLogoTitle";
import mainTitle from "@/components/flh/dataKanban/mainTitle";
import radarChart from "@/components/flh/radarChart";
import dashboardChart from "@/components/flh/dashboardChart";
import lineChart from "@/components/Charts/lineChart";
import lineChartss from "@/components/Charts/lineChartss";
import pieChart from "@/components/Charts/pieChart.vue";
import barChart from "@/components/Charts/barChart";
export default {
  components: {
    bgLayOut,
    topLogoTitle,
    mainTitle,
    radarChart,
    dashboardChart,
    lineChart,
    lineChartss,
    pieChart,
    barChart
  },
  data() {
    return {
      marketShareArr: [], // 市场占有率
      resoldApartmentArr: [], // 二手房
      houseNumHouseContrastArr: [],
      shopOrderArr: [],
      tradingInArr: [],
      resoldApartmentOption: {
        grid: {
          top: 30,
          left: "13%"
        },
        color: "rgb(40, 231, 135)",
        tooltip: {
          show: false
        },
        label: {
          show: false
        },
        xAxis: {
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(40,231,135,0.5)"
            }
          },
          axisLabel: {
            rotate: 0,
            rich: {
              // x轴富文本样式
              value: {
                color: "rgb(40, 231, 135)"
              }
            }
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          }
        },
        yAxis: {
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(40,231,135,0.5)"
            }
          },
          axisLabel: {
            color: "rgb(40, 231, 135)"
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          }
        },
        color: "#FFD81A",
        startColor: "rgba(255, 216, 26, 0.8)",
        endColor: "rgba(255, 216, 26, 0.2)"
      },
      barChartOption: {
        exchange: true,
        showLabel: false,
        xAxis: {
          axisLine: {
            show: false,
            lineStyle: {
              color: "rgba(40,231,135,0.5)"
            }
          },
          axisLabel: {
            show: false,
            rotate: 0
          },
          axisTick: {
            show: false
          }
        },
        yAxis: {
          axisLine: {
            show: false,
            lineStyle: {
              color: "rgba(40,231,135,0.5)"
            }
          },
          axisTick: {
            show: false
          }
        },
        barWidth: 20
      },
      shopOrderOption: {
        color: ["#FFD81A", "#2BE951", "#1EC2FF"],
        radius: ["40%", "70%"],
        center: ["40%", "50%"],
        roseType: "radius",
        startAngle: 250,
        hidePieMargin: false,
        showLine: true,
        showLabel: true,
        legend: {
          show: false,
          left: 20
        }
      },
      comparisonOption: {
        grid: {
          top: 50
        },
        legend: {
          top: 200,
          itemWidth: 8,
          itemHeight: 8,
          padding: 2
        },
        hideLineColor: false,
        showSymbol: "none",
        color: ["#2BE951", "#1EC2FF"],
        startColor: ["rgba(43,233,81,0.4)", "rgba(30,194,255,0.4)"],
        endColor: ["rgba(43,233,81,0.1)", "rgba(30,194,255,0.1)"],
        legendColor: "#55EEA8",
        tooltip: {
          show: false
        },
        showLabel: true,
        xAxis: {
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(40,231,135,0.5)"
            }
          },
          axisLabel: {
            rotate: 0,
            rich: {
              // x轴富文本样式
              value: {
                color: "#55EEA8"
              }
            }
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          }
        },
        yAxis: {
          axisLabel: {
            color: "#55EEA8"
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(40,231,135,0.5)"
            }
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          }
        }
      },
      lineChartOption: {
        grid: {
          top: 30,
          left: "7%"
        },
        legend: {
          top: 200
        },
        hideLineColor: false,
        showSymbol: "none",
        color: ["#FFD81A", "#FF614A"],
        startColor: ["rgba(255,216,26,0.4)", "rgba(255,97,74,0.4)"],
        endColor: ["rgba(255,216,26,0.1)", "rgba(255,97,74,0.1)"],
        legendColor: "#55EEA8",
        tooltip: {
          show: false
        },
        showLabel: true,
        xAxis: {
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(40,231,135,0.5)"
            }
          },
          axisLabel: {
            rotate: 0,
            rich: {
              // x轴富文本样式
              value: {
                color: "#55EEA8"
              }
            }
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          }
        },
        yAxis: {
          axisLabel: {
            color: "#55EEA8"
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(40,231,135,0.5)"
            }
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          }
        }
      }
    };
  },
  mounted() {
    this.setData();
    this.vehicleListFun();
  },
  methods: {
    setData() {
      var resoldApartmentArr = [
        {
          name: "2012年",
          value: 2323
        },
        {
          name: "2013年",
          value: 3323
        },
        {
          name: "2014年",
          value: 4323
        },
        {
          name: "2015年",
          value: 4523
        },
        {
          name: "2016年",
          value: 4623
        },
        {
          name: "2017年",
          value: 5523
        },
        {
          name: "2018年",
          value: 10823
        }
      ];
      this.$set(this, "resoldApartmentArr", resoldApartmentArr);
      var marketShareArr = [
        {
          name: "其他中介",
          value: 800,
          barLinearColor: ["#55EEA8", "#23DECD"]
        },
        {
          name: "汇天",
          value: 1000,
          barLinearColor: ["#55EEA8", "#23DECD"]
        },
        {
          name: "浩天",
          value: 1300,
          barLinearColor: ["#55EEA8", "#23DECD"]
        },
        {
          name: "房天下",
          value: 1500,
          barLinearColor: ["#1EC2FF", "#108BF3"]
        },
        {
          name: "懿皇置业",
          value: 1800,
          barLinearColor: ["#FFD81A", "#F7931E"]
        },
        {
          name: "房联行",
          value: 2000,
          barLinearColor: ["#FF614A", "#ED2A04"]
        }
      ];
      this.$set(this, "marketShareArr", marketShareArr);
      var shopArr = [
        {
          name: "租房",
          value: "43990"
        },
        {
          name: "售房",
          value: "82457"
        },
        {
          name: "代办",
          value: "34234"
        }
      ];
      this.$set(this, "shopOrderArr", shopArr);
      var houseNumHouseContrastArr = [
        {
          name: "2017年(1)",
          list: [
            {
              name: "房产开发数量",
              value: 124
            },
            {
              name: "城市流动人口",
              value: 166
            }
          ],
          value: 16
        },
        {
          name: "2017年(2)",
          list: [
            {
              name: "房产开发数量",
              value: 156
            },
            {
              name: "城市流动人口",
              value: 199
            }
          ],
          value: 16
        },
        {
          name: "2017年(3)",
          list: [
            {
              name: "房产开发数量",
              value: 219
            },
            {
              name: "城市流动人口",
              value: 211
            }
          ],
          value: 16
        },
        {
          name: "2017年(4)",
          list: [
            {
              name: "房产开发数量",
              value: 256
            },
            {
              name: "城市流动人口",
              value: 134
            }
          ],
          value: 16
        },
        {
          name: "2018年(1)",
          list: [
            {
              name: "房产开发数量",
              value: 300
            },
            {
              name: "城市流动人口",
              value: 166
            }
          ],
          value: 16
        },
        {
          name: "2018年(2)",
          list: [
            {
              name: "房产开发数量",
              value: 188
            },
            {
              name: "城市流动人口",
              value: 166
            }
          ],
          value: 16
        }
      ];
      this.$set(this, "houseNumHouseContrastArr", houseNumHouseContrastArr);
      var tradingInArr = [
        {
          name: "2017年(1)",
          list: [
            {
              name: "房产交易量",
              value: 124
            },
            {
              name: "人均收入",
              value: 166
            }
          ],
          value: 16
        },
        {
          name: "2017年(2)",
          list: [
            {
              name: "房产交易量",
              value: 156
            },
            {
              name: "人均收入",
              value: 199
            }
          ],
          value: 16
        },
        {
          name: "2017年(3)",
          list: [
            {
              name: "房产交易量",
              value: 219
            },
            {
              name: "人均收入",
              value: 211
            }
          ],
          value: 16
        },
        {
          name: "2017年(4)",
          list: [
            {
              name: "房产交易量",
              value: 256
            },
            {
              name: "人均收入",
              value: 134
            }
          ],
          value: 16
        },
        {
          name: "2018年(1)",
          list: [
            {
              name: "房产交易量",
              value: 300
            },
            {
              name: "人均收入",
              value: 166
            }
          ],
          value: 16
        },
        {
          name: "2018年(2)",
          list: [
            {
              name: "房产交易量",
              value: 188
            },
            {
              name: "人均收入",
              value: 166
            }
          ],
          value: 16
        }
      ];
      this.$set(this, "tradingInArr", tradingInArr);
    },
    vehicleListFun() {
      $(".roll_list li:eq(0)")
        .clone(true)
        .appendTo($(".roll_list")); // 克隆第一个放到最后(实现无缝滚动)
      var liHeight = $(".swiper_wrap").height(); // 一个li的高度
      // 获取li的总高度再减去一个li的高度(再减一个Li是因为克隆了多出了一个Li的高度)
      var totalHeight =
        $(".roll_list li").length *
          $(".roll_list li")
            .eq(0)
            .height() -
        liHeight;
      $(".roll_list").height(totalHeight); // 给ul赋值高度
      var index = 0;
      function tab() {
        $(".roll_list")
          .stop()
          .animate(
            {
              top: -index * liHeight
            },
            400,
            function() {
              if (index === $(".roll_list li").length - 1) {
                $(".roll_list").css({ top: 0 });
                index = 0;
              }
            }
          );
      }

      function next() {
        index++;
        if (index > $(".roll_list li").length - 1) {
          // 判断index为最后一个Li时index为0
          index = 0;
        }
        tab();
      }
      // 自动轮播
      autoTimer = setInterval(next, 3000);
      $(".roll_list a").hover(
        function() {
          clearInterval(autoTimer);
        },
        function() {
          autoTimer = setInterval(next, 3000);
        }
      );

      // 鼠标放到左右方向时关闭定时器
      $(".swiper_wrap").hover(
        function() {
          clearInterval(autoTimer);
        },
        function() {
          autoTimer = setInterval(next, 3000);
        }
      );
      // -----------------------------右上滚动---------
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../../../../styles/base/_parameters";

.industryData {
  .dataShow {
    @include absoluteAllSides(0, 0, 0, 0, 10);
    & .chart {
      @include absoluteAllSides(125, 84, 44, 64, 1);

      & .leftView {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        // 宏观经济指数
        .macroEconomy {
          .text {
            display: flex;
            justify-content: space-around;
            position: relative;
            top: 20px;
            z-index: 1;
            width: 100%;
            height: 100px;
            color: #23DECD;
            font-size: 16px;
            p:nth-of-type(1) { position: absolute; top: 40px; left: 33px; z-index: 1; }
            p:nth-of-type(2) { position: absolute; top: 0; left: 195px; z-index: 1; }
            p:nth-of-type(3) { position: absolute; top: 40px; right: 38px; z-index: 1; }
          }
          .dashBoardCon {
            position: relative;
            top: -55px;
            z-index: 1;
            width: 480px;
            height: 192px;
            .dashBoardChartCon {
              // position: absolute;
              // top: 0;
              // left: 0
            }
          }
        }

        // 二手房房价走势
        .secondHandHousePrice {
          position: absolute;
          top: 340px;
          left: 0;
          z-index: 1;
        }

        // 房产开发数量与流动人口趋势对比
        .houseNumHouseContrast {
          position: absolute;
          top: 650px;
          left: 0;
          z-index: 1;
        }
      }
      & .centerView {
        position: absolute;
        top: 60px;
        left: 577px;
        z-index: 1;

        // 行业资讯
        .news {
          @include flex-ic;
          width: 648px;
          height: 25px;
          overflow: hidden;
          & .icon {
            width: 18px;
            height: 20px;
            margin-right: 8px;
            background: url("../../../../../static/img/flh/data_ico2.png") left
              top no-repeat;
            background-size: 100% 100%;
          }
          & .roll {
            @include flex-ic-jsb;
            flex: 1;
            color: #55eea8;
            font-size: 20px;
            line-height: 1;
            border-bottom: 1px solid #55eea8;
            .roll_list {
              position: relative;
              top: 0;
              right: 0;
              z-index: 1;
              height: 24px !important;
              li {
                height: inherit;
              }
            }
          }
        }

        // 主要竟对门店分布对比
        .storeSpreadContrast {
          position: relative;
          top: 70px;
          z-index: 1;
        }
      }
      & .rightView {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 1;

        // 行业交易量
        .tradeSize {
          position: absolute;
          top: 0;
          right: 0;
          z-index: 1;
        }

        // 市场占有率
        .marketShare {
          position: absolute;
          top: 340px;
          right: 0;
          z-index: 1;
        }

        // 人均收入与房产交易量趋势对比
        .incomeHouseContrast {
          position: absolute;
          top: 650px;
          right: 0;
          z-index: 1;
        }
      }
    }
  }
}
</style>

